<template>
  <div class="reservoirMonitoring">
    <TitleColumn name='水库水情信息'>
      <a-button type="link" size="small" @click="handleMore" style="color: #5fa9eb">更多<DoubleRightOutlined /></a-button>
    </TitleColumn>
    <div class="content">
      <div class="tableColumn">
        <MonitorTable :tabType="state.type" :isWarn="state.isWarn"/>
      </div>
    </div>
    <TableModal @register="registerModal"/>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { DoubleRightOutlined } from '@ant-design/icons-vue';
  import TitleColumn from '@/components/TitleColumn';
  import { Icon } from '@gui-pkg/components';
  import MonitorTable from './MonitorTable';
  import TableModal from './TableModal';
  import { useModal } from "@gui-pkg/antdcomponents";


  defineOptions({ name: 'ReservoirMonitoring' });

  const [registerModal, { openModal: openModal }] = useModal();
  const state = reactive({
    name: '灌区总览',
    isShow: true,
  });

  const handleMore = () => {
    openModal(true, { record: 'val' });
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .reservoirMonitoring {
    width: 100%;
    ::v-deep(.titleIcon ) {
      width: 24px !important;
      height: 24px !important;
      background: url('@/assets/images/titleIcon3.png') no-repeat !important;
      background-size: contain !important;
    };
    .ant-btn > span + .anticon {
      margin-left: 2px;
    }
    .content {
      width: 100%;
      height: calc(100% - 40px);
      padding-top: 10px;
      display: flex;
      justify-content: center;
      .tableColumn {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
